import React, { Component } from 'react';
import { ActionSheet, List, Toast } from 'antd-mobile';
import { Image, ScrollView, StatusBar, Text, TouchableWithoutFeedback, View } from 'react-native';
import styles from './style';

const Item = List.Item;

// fix touch to scroll background page on iOS
// https://github.com/ant-design/ant-design-mobile/issues/307
// https://github.com/ant-design/ant-design-mobile/issues/163
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}

export default class extends Component {

  constructor(props) {
    super(props);
    this.clearCache = this.clearCache.bind(this);
    this.changeFontSize = this.changeFontSize.bind(this);
  }

  static navigationOptions = ({ navigation }) => ({
    title: '系统设置',
    headerBackTitle: null,
    headerTitleStyle: {
      color: '#fff',
    },
    headerStyle: {
      backgroundColor: '#ed4040'
    },
    headerLeft: (
      <TouchableWithoutFeedback onPress={() => {
        Toast.hide();
        navigation.goBack();
      }}>
          <View>
            <Image style={{ width: 23, height: 23, tintColor: '#fff', marginLeft: 10 }}
                   source={require('../../images/back.png')}
                   resizeMode="cover"
            />
          </View>
        </TouchableWithoutFeedback>
    ),
  });

  clearCache = () => {
    const BUTTONS = ['确定', '取消'];
    ActionSheet.showActionSheetWithOptions({
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,
        destructiveButtonIndex: BUTTONS.length - 2,
        // title: '',
        message: '确定清除所有缓存？',
        maskClosable: true,
        wrapProps,
      },
      (buttonIndex) => {
        if (buttonIndex === 0) {
          Toast.info('清除成功', 3, f => f, false);
        }
      });
  };

  changeFontSize = () => {
    const BUTTONS = ['大', '中（默认）', '小', '取消'];
    ActionSheet.showActionSheetWithOptions({
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,
        destructiveButtonIndex: BUTTONS.length - 2,
        // title: '',
        // message: '',
        maskClosable: true,
        wrapProps,
      },
      (buttonIndex) => {
        if (buttonIndex !== 3) {
          Toast.info('设置成功', 3, f => f, false);
        }
      });
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      <ScrollView style={styles.system}>
        <StatusBar barStyle="light-content" />
        <View style={styles.list}>
          {/*<List style={{ marginBottom: 10 }}>*/}
             {/*<Item extra={<Text style={styles.extra}>200M</Text>} onClick={() => this.clearCache()}>*/}
               {/*<Text style={styles.font}>清除缓存</Text>*/}
             {/*</Item>*/}
             {/*<Item extra={<Text style={styles.extra}>中</Text>} onClick={() => this.changeFontSize()}>*/}
               {/*<Text style={styles.font}>字体大小</Text>*/}
             {/*</Item>*/}
          {/*</List>*/}
          <List style={{ marginBottom: 10 }}>
            <Item onClick={() => navigate('Protocol')}>
               <Text style={styles.font}>用户协议</Text>
             </Item>
            <Item extra={<Text style={styles.extra}>0.1.0</Text>}
                  onClick={() => Toast.info('已经是最新版本', 3, f => f, false)}>
               <Text style={styles.font}>当前版本</Text>
             </Item>
          </List>
        </View>
        <View style={styles.bottom}>
          <Text style={styles.rights}>All Rights Reserved By 神木头条</Text>
        </View>
      </ScrollView>
    );
  }
}
